<template>
  <div style="left: 200px;top:50px;position: absolute">
    <h2>夜间模式</h2>
    <input style="left: -5px" class="switch-box" type="checkbox" @click="BH()" id="bian"></input>
    <!-- <h3>仍待完善的功能：密码修改、学生信息修改</h3> -->
  </div>
</template>

<script>
/* BH = function () {
  var bian = document.getElementById('bian')
  if (bian.checked) {
    window.sessionStorage.setItem('HB', 'dark')

  } else {
    window.sessionStorage.setItem('HB', 'light')
  }
  console.log(window.sessionStorage.getItem('HB')=="dark")
} */
  export default {
    name: 'Setting',


  methods:{
    BH(){
      var bian=document.getElementById("bian")
      if(bian.checked){
        window.sessionStorage.setItem("HB","dark")
      }else {
        window.sessionStorage.setItem("HB","light")
      }
    },
    mounted(){
      console.log(window.sessionStorage.getItem("HB"))
      var inp = document.getElementById('bian')
      if(window.sessionStorage.getItem("HB")=='light'||''){
        inp.checked=false
      }
      if(window.sessionStorage.getItem("HB")=='dark')
        inp.checked=true
    }
  }
}
</script>

<style>
.shine{
  background-color: #ffffff;
}

.dark{
  background-color: #545454
}
.switch-box {
  width: 100px;
  height: 60px;
  background-color: rgb(230, 230, 230);
  position: relative;
  cursor: pointer;
  /* 外观 */
  appearance: none;
  border-radius: 30px;
  transition: all 500ms;
}

.switch-box ::before {
  width: 100px;
  height: 60px;
  background-color: rgb(230, 230, 230);
  position: absolute;
  cursor: pointer;
  content: '';
  border-radius: 30px;
  transition: all 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
}

.switch-box::after {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 52px;
  height: 52px;
  border-radius: 26px;
  background-color: #fff;
  box-shadow: 1px 1px 5px rgba(#000, .3);
  content: '';
  transition: all 300ms cubic-bezier(0.075, 0.82, 0.165, 1);

}

.switch-box:checked {
  background-color: darkcyan;
}

.switch-box:checked::after {
  transform: translateX(40px);

}

.switch-box:checked::before {
  transform: scale(0);

}
</style>
